<script setup>
defineOptions({
  name: 'van-nav'
})
defineProps({
  title: {
    type: String,
    required: true
  }
})
</script>

<template>
  <div style="height: 46px">
    <van-nav-bar class="navbars" fixed @click-left="$router.go(-1)">
      <template #left>
        <svg
          class="bi bi-chevron-left"
          width="1em"
          height="1em"
          viewBox="0 0 16 16"
          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"
          />
        </svg>
      </template>
      <template #title>
        <h6 class="text-white font-weight-light">{{ title }}</h6>
      </template>
    </van-nav-bar>
  </div>
</template>

<style scoped lang="scss">
.navbars {
  background-color: #ffa666;
}
</style>
